{% extends 'shop/base.html' %}
{% block title %}
    天天生鲜—详情
{% endblock %}
{% block style %}
    <script src="/static/shop/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/shop/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/shop/css/footer.css">
    <link rel="stylesheet" href="/static/shop/css/detail.css">
    <link rel="stylesheet" href="/static/shop/css/search.css">
    <script src="/static/shop/js/bootstrap.js"></script>
{% endblock %}
{% block lable %}
    <div class="search col-sm-12">
        <div class="row">
            <!--左边图片和文字-->
            <div class="col-lg-5">
                <img src="/static/shop/images/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;商品详情</span>
            </div>
            <!--右边表单-->
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                 <form  method="post" action="/shop/seek/">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品" name="goods">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit" >搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block contenter %}
    <div class="container">

        <!--2.搜索框开始-->


        <menu class="container">
            <div class="col-xs-12 col-sm-2">
                <ul class="list-group">
                    <li class="list-group-item active">全部商品分类</li>
                </ul>

            </div>
            <div class="col-xs-12 col-sm-10">
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="#">首页</a></li>
                    <li role="presentation"><a href="#">手机生鲜</a></li>
                    <li role="presentation"><a href="#">抽奖</a></li>
                </ul>
            </div>
        </menu>
        <article class="container">
            <p class="col-xs-12">全部分类 > 新鲜水果 > 商品详情</p>
        </article>
        <form method="post" action="/shop/place_order/">
            {% csrf_token %}
            <section class="container">
                <div class="col-xs-12 col-sm-5">
                    <img src="/static/{{ goods.g_picture }}" width="300px" height="300px"/>
                </div>
                <div class="col-xs-12 col-sm-7">
                    <h2 class="title">{{ goods.g_name }}</h2>
                    <p>{{ goods.g_description }}</p>
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h1 id="price_detail">¥{{ goods.g_price }}<span class="span1">{{ goods.g_unit }}</span></h1>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <p class="newheight">数量:</p>
                    </div>
                    <div class="input-group col-xs-3">
                        <span class="input-group-addon" id="btn_add">+</span>
                        <input type="text" class="form-control newwidth" value="1" id="goods_number"
                               name="goods_number">
                        <span class="input-group-addon" id="btn_sub">-</span>
                    </div>
                    <div class="col-xs-12">
                        <p>总价:<span class="newprice" id="newprice">{{ goods.g_price }}元</span></p>
                    </div>
                    <p class="col-xs-3">
                        <button class="btn btn-danger btn-lg" href="#" role="button" type="submit">立即购买</button>
                    </p>
                    <p class="col-xs-3"><a class="btn btn-danger btn-lg" role="button" id='into_cart'>加入购物车</a></p>
                        <input id="goods_id" name='goods_id' hidden value="{{ goods.id }}">
                </div>
            </section>
        </form>
        <section class="container newspace">
            <div class="col-xs-12 col-sm-2">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center newheight">新品推荐</h3>
                    </div>
                    <div class="panel-body">
                        {% for goods in provide_goods %}
                        <div class="col-xs-12 col-sm-12">
                            <a href="/shop/detail/{{ goods.id }}/" class="thumbnail">
                                <img src="/static/{{ goods.g_picture }}" class="img-responsive">
                                <p class="text-center">{{ goods.g_name }}</p>
                                <p class="text-center">￥{{ goods.g_price }}</p>
                            </a>
                        </div>
                      {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-10">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">商品介绍</a></li>
                    <li><a href="#profile" data-toggle="tab">评论</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home">
                        <h3>商品详情</h3>
                        <p>{{ goods.g_description }}</p>
                    </div>
                    <div class="tab-pane" id="profile">...</div>
                </div>

            </div>
        </section>

    </div>
{% endblock %}
{% block script %}
    <script>
        $('#into_cart').click(function () {
            var goods_id = $('#goods_id').val();
            var goods_number = $('#goods_number').val();
            var send_data = {
                'goods_id': goods_id,
                'goods_number': goods_number,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            };
            $.ajax({
                    url: '/shop/add_cart/',
                    type: "post",
                    data: send_data,
                    success: function (data) {
                        alert(data['message'])
                    },
                    error: function (error) {
                        alert(error)
                    }
                }
            )
        });
        $(function () {
            $("#btn_add").click(function () {
                var value = $(this).next().val();
                value = parseInt(value);
                value += 1;
                $(this).next().val(value);
                /*取价格的html文本单位*/
                var htmls = $("#price_detail").html()
                /*用span进行切分,取出价格，转换成float型*/
                prices = htmls.split("span");
                price = prices[0];
                price = price.substring(1, price.length - 1);
                price = parseFloat(price);
                total = value * price;
                total = total.toFixed(2);
                /*求总价修改总价栏*/
                $("#newprice").text(total + "元")
            });
            $("#btn_sub").click(function () {
                var value = $(this).prev().val();
                value = parseInt(value);
                value -= 1;
                value = value <= 1 ? 1 : value;
                $(this).prev().val(value);
                /*取价格的html文本单位*/
                var htmls = $("#price_detail").html()
                /*用span进行切分,取出价格，转换成float型*/
                prices = htmls.split("span");
                price = prices[0];
                price = price.substring(1, price.length - 1);
                price = parseFloat(price);
                total = value * price;
                /*求总价修改总价栏*/
                $("#newprice").text(total.toFixed(2) + "元")
            });
        })
    </script>
{% endblock %}
